<script lang="ts">
  import { onMount } from "svelte";
  import { tweened } from "svelte/motion";
  import { cubicInOut } from "svelte/easing";
  import { scaleLinear } from "d3-scale";

  export let percent: number = 0;
  export let label: string = "";
  const color = scaleLinear<string, number>()
    .domain([0, 100])
    .range(["#fde047", "#dc2626"]);
  const progress = tweened(0, {
    duration: 4000,
    easing: cubicInOut,
  });

  onMount(() => {
    progress.set(+percent);
  });
</script>

<div class="p-1">
  <svg width="100%" height="100%" viewBox="0 0 200 240">
    <circle
      transform="rotate(-90 100 100)"
      cx="100"
      cy="100"
      r="90"
      fill="none"
      stroke-width="20"
      stroke="gray"
    />
    <circle
      class="transition-all duration-75"
      id="circle"
      stroke-dasharray="565,565"
      stroke-dashoffset={565 - 5.65 * $progress}
      stroke-linecap="round"
      transform="rotate(-90 100 100)"
      cx="100"
      cy="100"
      r="90"
      fill="none"
      stroke-width="20"
      stroke={String(color($progress))}
    />
    <text
      x="100"
      y="100"
      fill="#ffffff"
      text-anchor="middle"
      dominant-baseline="central"
    >
      <tspan id="percent" font-size="42px">{Math.floor($progress)}%</tspan>
    </text>
    <text
      x="100"
      y="230"
      fill="#75ccfe"
      text-anchor="middle"
      dominant-baseline="central"
    >
      <tspan id="percent" font-size="26px">{label}</tspan>
    </text>
  </svg>
</div>

<style>
</style>
